<template>
	<view class="IndexVideo" style="opacity: 0;">
		<video style="opacity: 0;"  id="myVideo" @fullscreenchange="fullscreenchange" :autoplay="true" @play="playVedio()" :src="url"></video>
	</view>
</template>

<script>
	export default {
		name: 'Indexvideo',
		props: {
			item: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				isOp:true,
				isFull: false, //是否全屏
				url: '',
				bgPic: '../../static/images/Index_banner3.png'
			};
		},
		onLoad(options) {
			this.url = options.url
			
			// 获取 video 上下文 videoContext 对象
			this.videoContext = uni.createVideoContext('myVideo',this);
			// 进入全屏状态
			this.videoContext.requestFullScreen();
			
			// this.isFull = true
			// // #ifdef APP-PLUS
			// plus.screen.lockOrientation('landscape-primary'); //锁定
			// // #endif 

		},
		// destroyed() {
		// 	// #ifdef APP-PLUS
		// 	plus.screen.unlockOrientation(); //解除锁定
		// 	// #endif
		// },
		// onBackPress(options) {
		// 	plus.screen.unlockOrientation(); //解除锁定
		// },
		methods: {
			fullscreenchange(e){
				console.log('-===',e.detail.direction);
				if('vertical' == e.detail.direction){
					// this.isFull = false
					uni.navigateBack({
						delta:1
					}) 
				}
			},
			playVedio() {
				
			},

		}
	}
</script>

<style lang="scss">
	.op0 {
		opacity: 0;
	}
	.IndexVideo {
		width: 100%;
		height: 100%;
		position: relative;

		#myVideo {
			width: 100%;
			height: 100%;
		}

		.videobg {
			height: 100%;
			width: 100%;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			position: relative;

			.myvideo {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 100%;

				video {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
